<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:fb="http://ogp.me/ns/fb#" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML Editor | Design Blogger Templates and Widgets</title>
<meta content='Learn How to Design Blogger Templates and Create Blogger Widgets Using this HTML Editor.' name='description'/>
<meta content='Design Blogger Templates, Design Blogger Widgets, Create Widgets, CSS, HTML, Javascript' name='keywords'/>
<!--
<script type='text/javascript' src='scripts/editor.js'></script>
<link href='http://lh4.ggpht.com/_7wsQzULWIwo/SvZu8ooXoQI/AAAAAAAACJk/78jXTrMVkM8/s800/MBT-favicon.gif' rel='icon' type='image/gif'/>
-->
<style type="text/css">
body{margin:0;padding:0;width:1007px;background:lightblue;}

</style>
<style type="text/css">
.openingeditor{width:984px;font-size:22px;color:#ccc;padding:10px;text-align:center;background:#555;margin:20px 0 0;}
#htmleditorcontroll{width:1004px;margin:0;padding:10px 0 0;border-top:5px double #333;height:25px;}
#htmleditorcontroll button{font-size:0.9em;font-weight:normal;cursor:pointer;margin:0px 20px;padding:3px 8px;font-family:Arial,Tahoma;text-align:center;background:rgba(55,55,55, .5);color:#fff;text-shadow:1px 0px 1px #000;border-radius:4px;border:1px solid #eee;box-shadow:-1px -1px 1px #444,2px 2px 2px #000;transition:1s ease-in-out;-o-transition:1s ease-in-out;-ms-transition:1s ease-in-out;-moz-transition:1s ease-in-out;-webkit-transition:1s ease-in-out;}
#htmleditorcontroll button:hover{background:rgba(0,0,0, .8);color:#0f2;}
a:focus, #htmleditorcontroll button:focus{outline:none !important;}
.clear{clear:both;margin:0;padding:0;height:0;}
#htmleditor,#htmlhtmleditor{width:100%;margin:10px auto;} 
#code_editor{width:434px;float:left;padding:3px;background:orange;border-radius:10px;overflow:auto;}
textarea.codebox{width:412px;height:470px;min-height:470px;max-height:470px;border:1px solid red;padding:10px;font:13px "Courier New",Courier,monospace;line-height:18px;border-radius:8px;}
#htmlpreview{position:relative;margin-top:-40px;padding:0 0 70px 0;float:right;position:relative;border-radius:3px;}
.myprev{position:relative;width:545px;height:495px;float:right;margin-top:-64px;background:rgba(255,255,255, .95);border:3px solid #555;border-radius:8px;overflow:auto;}
.GRpreview, .smallGRpreview{min-height:495px;max-height:4000px;min-width:545px;max-width:1007px;display:block;}
.myprev2 iframe.GRpreview{width:1007px;height:475px;max-height:4000px;overflow:visible;}
#htmlpreview button{margin-right:5px;margin-top:10px;}
#htmlpreview .myprev2{width:0;height:0;overflow:hidden;position:absolute;top:40px;right:0;border:3px solid transparent;transition:0.5s 1s;-o-transition:0.5s 1s;-ms-transition:0.5s 1s;-moz-transition:0.5s 1s;-webkit-transition:0.5s 1s;}
.myprev:hover{z-index:99;}#htmlpreview{z-index:100;}
#htmlpreview:hover .myprev2{margin-right:-10px;width:1012px;height:496px;background:#eee;border:3px solid #555;transition:0.3s;-o-transition:0.3s;-ms-transition:0.3s;-moz-transition:0.3s;-webkit-transition:0.3s;overflow:hidden;}

</style>
<!--[if IE]>
<style type="text/css">
#htmleditor,#htmlhtmleditor{position:relative;}
#htmlpreview button{margin-left:20px;}
#htmlpreview .myprev2{width:1007px;height:495px;margin-right:-5px;position:relative;margin-top:-35px;background:#eee;border-color:#bbb;}
.myprev{position:absolute;width:545px;height:495px;right:0;top:55px;margin-top:-54px;}
#htmlpreview button{margin-right:5px;margin-top:50px;}
</style>
<![endif]-->
</head>
<body>


<div class="buka">Di bawah telah disertakan demo styling link sederhana dan yang lebih komplex dengan melibatkan beberapa property css termasuk css3 transition property.</div>
<br />
<div class="clear">
</div>
<div class="openingeditor">
Please click the button to display. Continue with editing code and click to see the results!</div>
<div id="htmleditorcontroll">
<button onClick="preview.document.write(document.getElementsByTagName('textarea')[0].value); preview.document.close(); preview.focus()">Preview in a small box</button>
<button onClick="window.document.form2.code.value='';preview.document.write (document.getElementsByTagName ('textarea')[0].value); preview.document.close(); preview.focus()">
Clear </button>
</div>
<div style="clear: both;">
</div>
<div id="htmleditor">
<form id="code_editor" method="post" name="form2">
<textarea class="codebox" name="code" onClick="focus(this.code)">
<!DOCTYPE html>
<html>
<title>Image Link - An image as a link</title>
<head>
<style type="text/css">
a.download{
   display:block;
   margin:20px 0;
   width:169px;
   height:50px;
   border:2px solid #eee;
   border-radius:8px;
   padding:8px;
   box-shadow:0 0 6px #000;
   background:#555 url(https://lh6.googleusercontent.com/-TXycdSc_f38/UDqmS8L4CRI/AAAAAAAAAS4/ZgHKolfMvEU/download.png) center no-repeat;
   transition:0.5s;
   -o-transition:0.5s;
   -ms-transition:0.5s;
   -moz-transition:0.5s;
   -webkit-transition:0.5s;
 }
a.download:hover{
   background-color:#900;
   border-color:red;
   box-shadow:-2px -2px 2px #444, 4px 4px 4px #000;
}
</style> 



</head>
<body>

<h3>Image Link</h3>

<a href="http://gubhugcss-jquery.googlecode.com/svn/tooltip/jQttipnoclass.js" target="_blank" title="Klik untuk download">
<img alt="download link" height="50" src="https://lh6.googleusercontent.com/-TXycdSc_f38/UDqmS8L4CRI/AAAAAAAAAS4/ZgHKolfMvEU/download.png" width="169" />
</a>

<h3>Membuat image Link dg kode CSS</h3>

<a class="download" href="http://gubhugcss-jquery.googlecode.com/svn/tooltip/jQttipnoclass.js" target="_blank" title="Klik untuk download!"></a>

<h3>Image link di tengah-tengah teks/kalimat atau paragraf</h3>

Berbagai tutorial blogger dapat dengan mudah anda dapatkan, namun mungkin anda perlu membuka tutorial blogger dan blogdetik yang ada di <a href="http://gubhugreyot.blogspot.com/" target="_blank" title="Dapatkan lebih dari 500 tutorial blogger dan blogdetik di sini!"><img alt="gubhugreyot" height="20" src="http://1.bp.blogspot.com/-qkD6Kij3qyI/UDqrcyEJ6cI/AAAAAAAAATI/1Op-0TTueOM/s1600/gubhugreyot-h20.gif" width="104" /></a>. Berbagai tutorial menarik tersedia lengkap di "gubhugreyot". Membuka gubhugreyot mungkin saja akan membuat anda tak perlu banyak membuka tutorial yang lain?!
</body> 
</html>
</kontent>
</body> 
</html>
</textarea> 
</form>
<div id="htmlpreview">
<button onclick="preview2.document.write(document.getElementsByTagName('textarea')[0].value); preview2.document.close();preview2.focus()">Preview in a larger box</button>
<div class="myprev2">
<iframe src="javascript:''" class="GRpreview" frameborder="0" name="preview2"></iframe>
</div>
</div>
<div class="myprev">
<iframe src="javascript:''" class="smallGRpreview" frameborder="0" name="preview"></iframe>
</div>
</div>

</body>
</html>
